<template>
  <el-dialog
    title="新增曲谱"
    :visible.sync="showFlag"
    custom-class="dialog-small"
    @close="closeDialog"
  >
    <el-form
      ref="formData"
      :model="formData"
      :rules="formRules"
      label-width="80px"
    >
      <el-form-item label="曲谱名称" prop="song">
        <el-input
          v-model="formData.song"
          placeholder="请输入曲谱名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="所属分类" prop="category">
        <el-select v-model="formData.c_id" placeholder="请选择">
          <el-option
            v-for="item in category"
            :key="item.id"
            :label="item.category"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="曲谱图片" prop="photo">
        <el-upload
          class="upload-demo"
          action="http://localhost:9999/adminCategory/addDetailFile"
          :on-success="uploadFileSuccess"
          :on-remove="removeFile"
          ref="upload"
          :limit="1"
          :on-exceed="handleExceed"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过500kb
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item class="dialog-footer" align="center">
        <el-button type="primary" @click="onSave('formData')">保 存</el-button>
        <el-button @click="onCancel('formData')">取 消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { categoryDetailAdd, categoryList } from "../../config/interface";
export default {
  data() {
    const validate = (rule, value, callback) => {
      const reg = /^[0-9a-zA-Z\u4e00-\u9fa5]*$/g;
      if (!value) {
        callback(new Error("请输入基本信息"));
      } else {
        callback();
      }
    };
    return {
      showFlag: false,
      formData: {
        song: "",
        c_id:'',
        photo:''
      },
      formRules: {
        song: [{ validator: validate, trigger: "blur" }],
      },
      reqFlag: {
        add: true,
      },
      category: [],
    };
  },
  components: {},
  created() {this.getZhuanji()},
  methods: {
    // 文件超数量
    handleExceed(){
      this.$common.toast('当前文件已超过限制数量', 'error', false)
    },
    // 获得专辑分类选择器
    getZhuanji() {
      let url = categoryList;
      let params = {};
      this.$http(url, params).then((res) => {
        if (res.code == 1) {
          this.category = res.data;
        }
      });
    },
    // 初始化
    init() {
      this.$nextTick(() => {
        this.changeShowFlag();
      });
    },
    changeShowFlag() {
      this.showFlag = !this.showFlag;
    },
    // 文件上传成功
    uploadFileSuccess(response, file, fileList) {
      this.formData.photo = response;
    },
    // 移除文件
    removeFile() {
      this.formData.photo = "";
    },
    // 保存
    onSave(formData) {
      this.$refs[formData].validate((valid) => {
        if (valid) {
          if (this.formData.photo == "")
            return this.$common.toast("需要上传曲谱图片", "error", false);
          const url = categoryDetailAdd;
          if (this.reqFlag.add) {
            this.reqFlag.add = false;
            let params = {
              song: this.formData.song,
              photo: this.formData.photo,
              c_id:this.formData.c_id
            };
            this.$http(url, params).then((res) => {
              if (res.code == 1) {
                this.$common.toast("添加成功", "success", false);
                this.$emit("addCallBack");
                this.onCancel(formData);
              }
              this.reqFlag.add = true;
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 取消
    onCancel(formName) {
      this.changeShowFlag();
      this.$refs[formName].resetFields();
    },
    // 关闭弹出框
    closeDialog() {
      this.$refs["formData"].resetFields();
      this.formData={
        song: "",
        z_id:'',
        photo:''
      }
      this.$refs.upload.clearFiles()
    },
  },
};
</script>

<style lang="scss">
</style>
